@import '~@mat/react-mobile/styles/reset.less';
@import (reference) '../variables.less';

.mat-doc-device {
  display: flex;
  flex-direction: column;
  width: 375px;
  height: 100%;
  overflow: hidden;

  @media only screen and (max-width: 1440px) {
    width: 340px;
  }
  @media only screen and (max-width: 960px) {
    width: 300px;
  }

  &-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 20px;
    &-battery {
      width: 14px;
      height: 5px;
      background-color: #50d664;
      border-radius: 1px;
      box-shadow: 0 0 0 1px #fff, 0 0 0 2px #999;
    }
  }

  &-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 22px;
  }

  &-action {
    height: 40px;
    background: #ffffff;
    border-top: 1px solid var(--doc-border-color);

    [data-prefers-color='dark'] & {
      background: #262626;
    }

    > a {
      box-sizing: content-box;
      margin-left: 12px;
      padding: 0;
      color: #333;
      border: 2px solid transparent;
      outline: none;
      cursor: pointer;
      transition: opacity 0.2s, background 0.2s;

      &:hover {
        opacity: 0.8;
      }

      &:active {
        opacity: 0.9;
      }

      &[role='refresh'] {
        background-position-x: -144px;
      }

      &[role='open-demo'] {
        background-position-x: -126px;
      }

      [data-prefers-color='dark'] & {
        color: @c-text-dark;
      }
    }
  }

  > iframe {
    flex: 1;
    overflow: hidden;
    border: 0;
    border-top-right-radius: 12px;
  }
}
